<template>
    <div>
        <div class="container-fluid">
            <div class="swiper-container swiper-container-horizontal">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(el, i) in banners" :key="i">
                        <a :href="el.link">
                            <img :src="el.thumb" alt="">
                        </a>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev">&lt;</div>
                <div class="swiper-button-next">&gt;</div>
            </div>
        </div>
        <div class="container quick-bar">
            <router-link class="bar-box" :to="{name: 'portrait', params: {tab: 2}}">
                <div class="company-info"></div>
                <div>匠人匠品</div>
            </router-link>
            <router-link class="bar-box" to="news">
                <div class="news-center"></div>
                <div>新闻中心</div>
            </router-link>
            <router-link class="bar-box" to="cooperation">
                <div class="contact-us"></div>
                <div>招商加盟</div>
            </router-link>
        </div>
    </div>
</template>
<script>
import { getBanner } from '@/api'
export default {
    data() {
        return {
            swiper: null,
            banners: []
        }
    },
    methods: {
        _initSwiper() {
            this.swiper = new Swiper('.swiper-container', {
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                slidesPerView: 1,
                paginationClickable: !0,
                spaceBetween: 0,
                loop: !0,
                autoplay: 2e3,
                speed: 800
            })
        }
    },
    created() {
        getBanner().then(res => {
            if (res.code == 1) {
                this.banners = res.data
                this.$nextTick(() => {
                    this._initSwiper()
                })
            }
        })
    }
}
</script>
